<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-input-number
            v-model="formData[item.prop]"
            :min="item.min"
            :step="item.step"
            :max="item.max"
            :step-strictly="item.stepStrictly"
            :precision="item.precision"
            :size="item.size | setSize(item.size)"
            :disabled="item.disabled"
            :controls="item.controls"
            :controls-position="item.controlsPosition"
            :name="item.name"
            :label="item.label"
            :placeholder="item.placeholder"
            @change="handleChange"
            @blur="handleBlur"
            @focus="handleFocus"
        />
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-inputNumber',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 绑定值
                     * @type number
                     * @value 0
                     */
                    inputNumberVal: '10',
                    /**
                     * 设置计数器允许的最小值
                     * @type number
                     * @value -Infinity
                     */
                    min: -Infinity,
                    /**
                     * 设置计数器允许的最大值
                     * @type number
                     * @value Infinity
                     */
                    max: Infinity,
                    /**
                     * 计数器步长
                     * @type number
                     * @value 1
                     */
                    step: 1,
                    /**
                     * 是否只能输入 step 的倍数
                     * @type Bolean
                     * @value false/true
                     * @format 当type == password 时添加此配置
                     */
                    stepStrictly: false,
                    /**
                     * 数值精度
                     * @type number
                     * @value Number
                     */
                    precision: 2,
                    /**
                     * 计数器尺寸
                     * @type string
                     * @value large, small
                     */
                    size: 'medium',
                    /**
                     * 输入框是否显示字数
                     * @type Bolean
                     * @value false/true
                     */
                    disabled: false,
                    /**
                     * 是否使用控制按钮
                      @type Bolean
                     * @value false/true
                     */
                    controls: true,
                    /**
                     * 控制按钮位置
                     * @type String
                     * @value 'right '
                     */
                    controlsPosition: 'right',
                    /**
                     * 原生属性
                     * @type String
                     * @value 2
                     * @format 当type == textarea 时添加此配置
                     */
                    name: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: '',
                    /**
                     * 输入框默认 placeholder
                     * @type String
                     * @value
                     */
                    placeholder: '',
                    /**
                     * 自定义输入框类名
                     * @type string
                     * @value 'red'
                     */
                    class: ''
                }
            }
        },
        /**
         * 提交的表单项
         * @type Object
         */
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 在组件 Input 失去焦点时触发
         * @param event: Event
         *
         */
        handleBlur(event) {
            this.dispatch('baseForm', 'onInputNumberBlur', {
                event,
                prop: this.item.prop
            })
        },
        /**
         * 在组件 Input 获得焦点时触发
         * @param event: Event
         *
         */
        handleFocus(event) {
            this.dispatch('baseForm', 'onInputNumberFocus', {
                event,
                prop: this.item.prop
            })
        },
        /**
         * 绑定值被改变时触发
         * @param currentValue, oldValue
         *
         */
        handleChange(data) {
            this.dispatch('baseForm', 'onInputNumberChange', {
                data,
                prop: this.item.prop
            })
        }
    }
}
</script>
